<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容（最多120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="addCmt">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in cmts"  :key="item.content">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user}}&nbsp;&nbsp;发表时间：{{item.add_time}}
                </div>
                <div class="cmt-body">
                    {{item.content}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            pageIndex:1,//默认展示第一页数据
            cmts:[
                {user:'Jack',add_time:'2012-12-12 12:34',content:' 锄禾日当'},
                {user:'Fan',add_time:'2012-12-12 12:35',content:' 666'},
                {user:'Luck',add_time:'2012-12-12 12:36',content:'777'},
                {user:'Evis',add_time:'2012-12-12 12:36',content:'可以，但是没必要'},
                {user:'Kate',add_time:'2012-12-12 12:37',content:'Bite me'}
            ],
            msg:''
        }
    },
    created(){
        // getCmt();
        this.test();
    },
    methods:{
        getCmt(){
            this.$http.get('url/'+this.id +'?pageIndex'+'this.pageIndex').then(res=>{
              if(res.body.status=0){
                //   this.cmts=res.body.message;
                // 每当获取新数据的时候，不要把老数据清空覆盖，而是应该以老数据拼接上新数据
                this.cmts=this.cmts.concat(res.body.message)
              }  
              else{
                  Toast('获取评论失败')
              }
            })
        },
        getMore(){
            // this.pageIndex++;
            // this.getCmt();
        },
        addCmt(){
            //校验是否为空
            // if(this.msg.trim().length==0){
            //    return  Toast('评论内容不能为空')

            // } 
            // 发表评论
    
            // 参数1：请求的url地址
            // 参数2：提交给服务器的数据对象{content：this.msg}
            // 参数3：定义提交时候表单中数据的格式{emulateJSON:true}
            // this.$http.post('url/'+this.$route.paramsid,{content:this.msg.trim()}).then(res=>{
            //     if(res.body.status==0){
            //         // 成功
            //         // 1、手动拼接一个评论对象
            //         var cmt={user:'Any',add_time:'2012-12-12 12:37',content:this.msg.trim()}
            //         this.cmts.unshift(cmt);
            //         this.msg=''
            //     }
            //     else{
            //         Toast('失败！')
            //     }
            // })

            // 模拟
            if(this.msg.trim().length==0){
               return  Toast('评论内容不能为空')
            } 
            else{
                var cmt={user:'Any',add_time:'2012-12-12 12:37',content:this.msg.trim()}
                this.cmts.unshift(cmt);
                this.msg=''
            }

        },
        test(){
            console.log('test')
        }
    },
    props:['id']
}
</script>


<style lang="less" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
    }
    .cmt-list{
        margin: 10px 0;
        .cmt-item{
            font-size: 14px;
            .cmt-title{
                background-color: #ccc;
                line-height: 35px;
            }
            .cmt-body{
                text-indent: 2em;

            }
        }
    }
}
</style>



